<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    stripe
    @selection-change="(selection) => $emit('selection-change', selection)"
  >
    <el-table-column type="selection" align="center" />
    <el-table-column prop="account" label="账号" align="center" width="100" />
    <el-table-column prop="userName" label="姓名" align="center" width="100" />
    <el-table-column prop="phone" label="手机号" align="center" width="150" />
    <el-table-column prop="email" label="邮箱" align="center" width="150" />
    <el-table-column label="部门" align="center" width="150">
      <template slot-scope="scope">{{scope.row.department && scope.row.department.departmentName}}</template>
    </el-table-column>
    <el-table-column label="角色" align="center" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <span
          v-for="(item,index) of scope.row.roles"
          :key="index"
          style="margin-right: 5px;"
        >{{item && item.roleName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="性别" align="center" width="50">
      <template
        slot-scope="scope"
      >{{ scope.row.sex === 0 ? '未知' : scope.row.sex === 1 ? '男' : '女' }}</template>
    </el-table-column>
    <el-table-column label="账号状态" align="center" width="100">
      <template slot-scope="scope">
        <el-tag :type="scope.row.status === 0 ? 'success' : 'info'">
          {{
          scope.row.status === 0 ? '正常' : '禁用'
          }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center" width="150" />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      required: true,
      default: () => false
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table
  margin-top 20px
</style>
